/**
 * 统计页面
 * 展示用户的创作数据、成就、排行榜等
 */
import React from 'react';
import { Row, Col, Tabs } from 'antd';
import {
  DashboardOutlined,
  TrophyOutlined,
  CalendarOutlined,
  LineChartOutlined,
  FireOutlined,
} from '@ant-design/icons';
import {
  StatisticsPanel,
  AchievementList,
  CreationCalendar,
  QualityTrendChart,
  EfficiencyChart,
  RankingsList,
} from '@/components/statistics';
import './style.css';

const StatisticsPage: React.FC = () => {
  const tabItems = [
    {
      key: 'overview',
      label: (
        <span>
          <DashboardOutlined />
          概览
        </span>
      ),
      children: (
        <div className="statistics-tab-content">
          {/* 统计面板 */}
          <StatisticsPanel />

          <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
            {/* 效率分析 */}
            <Col xs={24} xl={24}>
              <EfficiencyChart />
            </Col>

            {/* 质量趋势 */}
            <Col xs={24} xl={24}>
              <QualityTrendChart />
            </Col>
          </Row>
        </div>
      ),
    },
    {
      key: 'achievements',
      label: (
        <span>
          <TrophyOutlined />
          成就
        </span>
      ),
      children: (
        <div className="statistics-tab-content">
          <AchievementList />
        </div>
      ),
    },
    {
      key: 'calendar',
      label: (
        <span>
          <CalendarOutlined />
          日历
        </span>
      ),
      children: (
        <div className="statistics-tab-content">
          <CreationCalendar />
        </div>
      ),
    },
    {
      key: 'rankings',
      label: (
        <span>
          <FireOutlined />
          排行榜
        </span>
      ),
      children: (
        <div className="statistics-tab-content">
          <RankingsList />
        </div>
      ),
    },
  ];

  return (
    <div className="statistics-page">
      <div className="statistics-page-header">
        <h1>数据统计</h1>
        <p>查看您的创作数据、成就进度和社区排名</p>
      </div>

      <Tabs
        defaultActiveKey="overview"
        items={tabItems}
        className="statistics-tabs"
        size="large"
      />
    </div>
  );
};

export default StatisticsPage;
